<template>
<h2>等级列表</h2>
等级名称<input type="text" v-model="lname"/>
<input type="button" value="查询" class="btn btn-success" @click="Show" />
<table class="table table-bordered">
    <thead>
        <tr class="bg-info">
            <td>等级编号</td>
            <td>等级名称</td>
            <td>最小积分</td>
            <td>最大积分</td>
            <td>添加时间</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td>{{ item.lid }}</td>
            <td>{{ item.levelname }}</td>
            <td>{{ item.minjing }}</td>
            <td>{{ item.maxjing }}</td>
            <td>{{ item.createtime.substring(0,19) }}</td>
            <td>
                <a href="#" @click="Fenpei(item.lid)">分配权益</a>
            </td>
        </tr>
    </tbody>
</table>

共有{{ page.pagecount }}页,当前是第{{ page.pageindex }}页,共有{{ page.totalcount }}行,每页{{ page.pagesize }}行
<br/>

<a href="#" @click="pageshow(1)" style="margin-right: 10px;">首页</a>
<a href="#" @click="pageshow(page.pageindex-1)" style="margin-right: 10px;">上一页</a>
<a href="#" @click="pageshow(page.pageindex+1)" style="margin-right: 10px;">下一页</a>
<a href="#" @click="pageshow(page.pagecount)" style="margin-right: 10px;">尾页</a>
<select v-model="page.pagesize" @change="pagerow">
    <option :value="2">2条每页</option>
    <option :value="3">3条每页</option>
    <option :value="5">5条每页</option>
</select>
<input type="text" v-model="jump" style="width: 50px;"/>
<input type="button" value="查询" class="btn btn-success" @click="pagejump" />
</template>
    
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
const router=useRouter()

const info=ref([{
    lid:0,
    levelname:'',
    maxjing:'',
    minjing:'',
    createtime:''
}])

onMounted(()=>{
    Show()
})

const page=ref({
    pageindex:1,
    pagesize:2,
    pagecount:0,
    totalcount:0
})
const lname=ref('')
const Show=()=>{
    axios.get('https://localhost:7279/api/LevelLevelShow',{
        params:{
            lname:lname.value,
            pageindex:page.value.pageindex,
            pagesize:page.value.pagesize
        }
    })
    .then(res=>{
        info.value=res.data.pdata
        page.value.pagecount=res.data.pagecount
        page.value.totalcount=res.data.totalcount
    })
}

//翻页
const pageshow=(index:number)=>{
    if(index<1){
        alert('当前已经是第一页了')
        return
    }
    if(index>page.value.pagecount){
        alert('当前已经是最后一页了')
        return
    }
    page.value.pageindex=index
    Show()
}
//更改每页行数
const pagerow=()=>{
    page.value.pageindex=1
    Show()
}
//跳转页面
const jump=ref('')
const pagejump=()=>{
    if(!jump.value){
        alert('页码值不能为空')
        return
    }
    if(isNaN(Number(jump.value))){
        alert('页码值只能是数字')
        return
    }
    if(Number(jump.value)<1){
        alert('页码值不能小于1')
        return
    }
    if(Number(jump.value)>page.value.pagecount){
        alert('页码值不能大于总页数')
        return
    }
    page.value.pageindex=Number(jump.value)
    Show()
}


//分配权益页面
const Fenpei=(id:number)=>{
    router.push({
        name:'FenpeiQuanyi',
        params:{
            id:id
        }
    })
}




</script>